<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${fileName}">代码预览</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">
    <style>
        :root {
            --color-primary: #165dff;
            --color-text-1: #ffffff;
            --color-text-2: rgba(255, 255, 255, 0.7);
            --color-text-3: rgba(255, 255, 255, 0.5);
            --color-bg-1: #1a1a1a;
            --color-bg-2: #000000;
            --color-border: rgba(255, 255, 255, 0.1);
            --color-fill-2: rgba(255, 255, 255, 0.1);
            --color-danger: #f53f3f;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "SimSun", sans-serif;
            background: var(--color-bg-2);
            color: var(--color-text-1);
            height: 100vh;
            overflow: hidden;
            user-select: text; /* Allow text selection for code */
        }

        .header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
            z-index: 10;
            color: var(--color-text-1);
            pointer-events: none;
        }

        .header > * {
            pointer-events: auto;
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .file-name {
            font-size: 14px;
            opacity: 0.9;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        .language-badge {
            padding: 2px 8px;
            background: rgba(255,255,255,0.1);
            color: var(--color-text-2);
            border-radius: 2px;
            font-size: 12px;
            border: 1px solid var(--color-border);
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .close-btn, .copy-btn {
            cursor: pointer;
            padding: 8px;
            border-radius: 4px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: white;
        }

        .close-btn:hover, .copy-btn:hover {
            background: rgba(255,255,255,0.1);
        }

        .copy-btn svg {
            width: 20px;
            height: 20px;
        }

        .code-container {
            height: 100vh;
            overflow: auto;
            padding: 68px 20px 20px 20px; /* Top padding for header */
        }

        pre {
            margin: 0;
            background: #1a1a1a !important;
            border-radius: 4px;
            padding: 20px !important;
            min-height: 100%;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--color-border);
        }

        pre code {
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            text-shadow: none !important;
        }

        /* Loading State */
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--color-text-3);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
        }

        .spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(255,255,255,0.1);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 16px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Error State */
        .error-container {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--color-text-2);
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .error-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--color-text-1);
            margin-bottom: 8px;
        }

        .error-desc {
            color: var(--color-text-3);
            font-size: 14px;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 5px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        /* Toast */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
            z-index: 100;
        }

        .toast.show {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="file-info">
        <span class="file-name" th:text="${fileName}">文件名</span>
        <span class="language-badge" th:text="${language}">language</span>
    </div>
    <div class="header-right">
        <button class="copy-btn" onclick="copyCode()" title="复制全部代码">
            <svg viewBox="0 0 48 48" fill="none">
                <path d="M13 12.4316V7.24975C13 6.69747 13.4477 6.24975 14 6.24975H34C34.5523 6.24975 35 6.69747 35 7.24975V12.4316" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M13 35.5684V40.7503C13 41.3025 13.4477 41.7503 14 41.7503H34C34.5523 41.7503 35 41.3025 35 40.7503V35.5684" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M35 12.4316H13C11.8954 12.4316 11 13.3271 11 14.4316V33.5684C11 34.673 11.8954 35.5684 13 35.5684H35C36.1046 35.5684 37 34.673 37 33.5684V14.4316C37 13.3271 36.1046 12.4316 35 12.4316Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/>
            </svg>
        </button>
        <div class="close-btn" onclick="window.close()" title="关闭">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="none">
                <path d="M14 14L34 34" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M14 34L34 14" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
    </div>
</div>

<div class="code-container">
    <!-- Loading -->
    <div class="loading-container" id="loading">
        <div class="spinner"></div>
        <div>正在加载资源...</div>
    </div>

    <!-- Content -->
    <div id="code-content" style="display: none; height: 100%;">
        <pre class="line-numbers"><code class="language-" th:classappend="${'language-' + language}"
                                        id="code-block"></code></pre>
    </div>

    <!-- Error -->
    <div id="error" class="error-container">
        <div class="error-title">加载失败</div>
        <div class="error-desc" id="error-msg">请检查网络连接或稍后重试</div>
    </div>
</div>

<div class="toast" id="toast">已复制到剪贴板</div>

<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>

<script th:inline="javascript">
    const streamUrl = /*[[${streamUrl}]]*/ '';
    const language = /*[[${language}]]*/ 'plaintext';

    // 配置 Prism 自动加载器
    Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/';

    async function loadCode() {
        try {
            const response = await fetch(streamUrl);

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            const text = await response.text();

            const codeBlock = document.getElementById('code-block');
            codeBlock.textContent = text;

            document.getElementById('loading').style.display = 'none';
            document.getElementById('code-content').style.display = 'block';

            Prism.highlightElement(codeBlock);

        } catch (error) {
            console.error('加载代码失败:', error);
            document.getElementById('loading').style.display = 'none';
            document.getElementById('code-content').style.display = 'none';

            const errorDiv = document.getElementById('error');
            const errorMsg = document.getElementById('error-msg');
            errorMsg.textContent = error.message || '资源加载失败';
            errorDiv.style.display = 'flex';
        }
    }

    function copyCode() {
        const code = document.getElementById('code-block').textContent;
        navigator.clipboard.writeText(code).then(() => {
            showToast('已复制到剪贴板');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败');
        });
    }

    function showToast(msg) {
        const toast = document.getElementById('toast');
        toast.textContent = msg;
        toast.classList.add('show');
        setTimeout(() => {
            toast.classList.remove('show');
        }, 2000);
    }

    // Disable context menu
    document.addEventListener('contextmenu', (e) => {
        e.preventDefault();
    });

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', loadCode);
    } else {
        loadCode();
    }
</script>
</body>
</html>